<template>
	<view class="move-container">
		<view class="form-section">
			<u-form :model="form" ref="uForm">
				<u-form-item label="联系人" prop="name" required>
					<u-input v-model="form.name" placeholder="请输入联系人姓名"></u-input>
				</u-form-item>
				<u-form-item label="联系电话" prop="phone" required>
					<u-input v-model="form.phone" placeholder="请输入联系电话"></u-input>
				</u-form-item>
				<u-form-item label="原地址" prop="oldAddress" required>
					<u-input v-model="form.oldAddress" placeholder="请输入原安装地址"></u-input>
				</u-form-item>
				<u-form-item label="新地址" prop="newAddress" required>
					<u-input v-model="form.newAddress" placeholder="请输入新安装地址"></u-input>
				</u-form-item>
				<u-form-item label="预约时间" prop="appointmentTime" required>
					<view class="selected-time" @click="showTimePicker = true">
						{{form.appointmentTime ? formatTime(form.appointmentTime) : '请选择预约时间'}}
					</view>
					<u-datetime-picker
						v-model="form.appointmentTime"
						:show="showTimePicker"
						@confirm="onTimeSelect"
						@cancel="showTimePicker = false"
						mode="datetime"
						:min-date="minDate"
						:max-date="maxDate"
					></u-datetime-picker>
				</u-form-item>
				<u-form-item label="备注" prop="remark">
					<u-textarea v-model="form.remark" placeholder="请输入备注信息（选填）"></u-textarea>
				</u-form-item>
			</u-form>
		</view>

		<view class="notice-section">
			<view class="notice-title">
				<u-icon name="info-circle" color="#1296db" size="28"></u-icon>
				<text>移机须知</text>
			</view>
			<view class="notice-content">
				<text>1. 请确保新安装地址具备基本安装条件</text>
				<text>2. 移机服务将收取相应的服务费用</text>
				<text>3. 移机人员将提前与您联系确认具体时间</text>
				<text>4. 如需更改预约时间请提前24小时联系客服</text>
			</view>
		</view>

		<view class="submit-section">
			<u-button type="primary" @click="submitForm">提交移机申请</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		const currentDate = new Date()
		const maxDate = new Date('2035-12-31') // 设置最大时间到2035年底
		return {
			form: {
				name: '',
				phone: '',
				oldAddress: '',
				newAddress: '',
				appointmentTime: currentDate.getTime(), // 设置初始时间为当前时间
				remark: ''
			},
			showTimePicker: false,
			minDate: currentDate.getTime(),
			maxDate: maxDate.getTime(),
			rules: {
				name: [{
					required: true,
					message: '请输入联系人姓名',
					trigger: ['blur', 'change']
				}],
				phone: [{
					required: true,
					message: '请输入联系电话',
					trigger: ['blur', 'change']
				}],
				oldAddress: [{
					required: true,
					message: '请输入原安装地址',
					trigger: ['blur', 'change']
				}],
				newAddress: [{
					required: true,
					message: '请输入新安装地址',
					trigger: ['blur', 'change']
				}],
				appointmentTime: [{
					required: true,
					message: '请选择预约时间',
					trigger: ['blur', 'change']
				}]
			}
		}
	},
	methods: {
		onDateSelect(e) {
			this.form.appointmentTime = e.result
			this.showCalendar = false
		},
		onTimeSelect(timestamp) {
			console.log(timestamp, 'timestamp');
			// timestamp 已经是时间戳，直接赋值给 appointmentTime
			this.form.appointmentTime = timestamp.value;
			this.showTimePicker = false;
		},
		formatTime(time) {
			if (!time) return '';
			const date = new Date(Number(time));
			if (isNaN(date.getTime())) return '';
			
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}`;
		},
		submitForm() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					uni.showLoading({
						title: '提交中...'
					})
					
					// 模拟提交
					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						})
						
						// 返回上一页
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}, 2000)
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.move-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;

	.form-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.selected-time {
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 20rpx;
			background-color: #f5f5f5;
			border-radius: 8rpx;
			color: #333;
		}
	}

	.notice-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.notice-title {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			text {
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 10rpx;
			}
		}

		.notice-content {
			text {
				display: block;
				font-size: 28rpx;
				color: #666;
				line-height: 1.8;
			}
		}
	}

	.submit-section {
		padding: 40rpx 20rpx;
	}
}
</style>
